<script setup lang="ts">
import tmApp from "@/tmui/components/tm-app/tm-app.vue";
import {
  currentPageType,
  setPageType,
  THEME_COLOR_DRIVER,
  THEME_COLOR_OWNER,
} from "@/theme";
import imgOwner from "@/static/images/i-owner@2x.png";
import imgDriver from "@/static/images/i-driver@2x.png";


function toLogin() {
  uni.switchTab({
    url: "/pages/demo/form",
  });
}
</script>

<template>
  <tm-app ref="appRef" color="#FFFFFF">
    <tm-sheet :margin="[0]" :padding="[40, 88, 40, 40]">
      <tm-text
        :font-size="48"
        color="#000000"
        class="tw-font-bold"
        label="动态主题切换"
      >
      </tm-text>
      <tm-text
        class="tw-mb-[80rpx] tw-mt-[40rpx]"
        :font-size="28"
        color="#D68711"
        label="根据选择UI主题不同"
      >
      </tm-text>
      <tm-sheet
        :margin="[0, 0, 0, 40]"
        :padding="[40]"
        :border="4"
        :border-color="
          currentPageType === 'owner' ? THEME_COLOR_OWNER : 'transparent'
        "
        :round="5"
        :height="300"
        color="rgba(22,120,255,0.1)"
        @click="setPageType('owner')"
      >
        <view
          class="tw-flex tw-w-full tw-flex-1 tw-flex-row tw-items-center tw-justify-center tw-gap-[40rpx]"
        >
          <tm-image :src="imgOwner" :height="300" :width="300"></tm-image>
          <tm-text
            :font-size="48"
            color="#333333"
            class="tw-font-bold"
            label="蓝色"
          >
          </tm-text>
        </view>
      </tm-sheet>
      <tm-sheet
        :margin="[0, 0, 0, 40]"
        :padding="[40]"
        :border="4"
        :border-color="
          currentPageType === 'driver' ? THEME_COLOR_DRIVER : 'transparent'
        "
        :round="5"
        :height="300"
        color="rgba(196,70,69,0.1)"
        @click="setPageType('driver')"
      >
        <view
          class="tw-flex tw-w-full tw-flex-1 tw-flex-row tw-items-center tw-justify-center tw-gap-[40rpx]"
        >
          <tm-image :src="imgDriver" :height="300" :width="300"></tm-image>
          <tm-text
            :font-size="48"
            color="#333333"
            class="tw-font-bold"
            label="红色"
          >
          </tm-text>
        </view>
      </tm-sheet>
      <tm-button
        @click="toLogin"
        :margin="[0, 40, 0, 80]"
        :round="5"
        block
        :height="100"
        :font-size="32"
      >
        下一步
      </tm-button>
    </tm-sheet>
  </tm-app>
</template>

<style scoped></style>
